<template>
  <div class="my">
    <div class="head">
      <div class="backgroundMap">
        <div class="headPortrait"></div>
      </div>
      <div class="information">
        <div>粉丝：20</div>
        <div class="name">皮蛋 <span>lv.5</span></div>
        <div>关注：0</div>
      </div>
    </div>
    <div class="Vault">
      <div>
        <div class="Diamonds"></div>
        {{ Diamonds }}
      </div>
      <div>
        <div class="Purse"></div>
        99
      </div>
      <div>
        <div class="recommend"></div>
        99
      </div>
      <div>
        <div class="MonthlyTicket"></div>
        99
      </div>
    </div>
    <div class="list">
      <div class="noumenon">
        <!-- <div class="history" @click="BooklList">
          <p class="imgs-sd"></p>
          <h1>我的书单</h1>
          <div class="iconfont icon-xiangyou1"></div>
        </div> -->
        <div class="history" @click="bookshelf">
          <p class="imgs-sj"></p>
          <h1>我的书架</h1>
          <div class="iconfont icon-xiangyou1"></div>
        </div>
        <div class="history" @click="VoucherCenter">
          <p class="imgs-cz"></p>
          <h1>充值中心</h1>
          <div class="iconfont icon-xiangyou1"></div>
        </div>
        <div class="history" @click="Feedback">
          <p class="imgs-fk"></p>
          <h1>意见反馈</h1>
          <div class="iconfont icon-xiangyou1"></div>
        </div>
        <div class="history" @click="contactUs">
          <p class="imgs-lx"></p>
          <h1>联系我们</h1>
          <div class="iconfont icon-xiangyou1"></div>
        </div>
        <a class="history" href="https://www.12377.cn/">
          <p class="imgs-jb"></p>
          <h1>在线举报</h1>
          <div class="iconfont icon-xiangyou1"></div>
        </a>
        <div class="history" @click="eliminate">
          <p class="imgs-tc"></p>
          <h1>退出登录</h1>
          <div class="iconfont icon-xiangyou1"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Diamonds: 0,
    };
  },
  methods: {
    BooklList() {
      this.$router.push("/my/BooklList");
    },
    bookshelf() {
      this.$router.push("/Ranking");
    },
    VoucherCenter() {
      this.$router.push("/my/VoucherCenter");
    },
    Feedback() {
      this.$router.push("/my/Feedback");
    },
    contactUs() {
      this.$router.push("/my/contactUs");
    },
    eliminate() {
      localStorage.setItem("user", "");
      localStorage.setItem("password", "");
      this.$router.push("/SignIn");
    },
  },
  created() {
    this.Diamonds = this.$store.state.jg;
  },
};
</script>
<style lang="less">
.my {
  width: 100%;
  height: 100vh;
  background-color: #fdfdfd;
  .head {
    height: 25%;
    .backgroundMap {
      height: 65%;
      background-color: turquoise;
      position: relative;
      background-image: url(../assets/bg_kanmanhua.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .headPortrait {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background-color: white;
        background-image: url(../assets/unlogin_head.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 38%;
        top: 50%;
      }
    }
    .information {
      height: 50%;
      display: flex;
      justify-content: space-around;
      color: #a7a7a7;
      font-size: 14px;
      text-align: center;
      div {
        padding-top: 5%;
        flex: 1;
      }
      .name {
        padding-top: 10%;
        font-size: 16px;
        color: black;
        span {
          font-size: 12px;
          background-color: #ff7546;
          padding: 2% 4%;
          color: white;
          border-radius: 5px;
        }
      }
    }
  }
  .Vault {
    width: 96%;
    height: 10%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    div {
      width: 23%;
      height: 70%;
      padding-top: 5%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      div {
        display: inline-block;
        width: 35%;
        height: 40%;
        background-image: url(../assets/sprite.user.4a48e@2x.png);
        background-repeat: no-repeat;
        background-size: 500%;
      }
      .Diamonds {
        background-position-y: 47%;
      }
      .Purse {
        background-position-x: 40%;
      }
      .recommend {
        background-position-x: 65%;
      }
      .MonthlyTicket {
        background-position: 65% 32%;
      }
    }
  }
  .list {
    padding-top: 0;
    padding-bottom: 70px;
    .noumenon {
      .history {
        width: 90%;
        height: 8%;
        padding: 2% 5%;
        margin: 0 auto;
        border-top: 1px solid #f3f3f3;
        border-bottom: 1px solid #f3f3f3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        h1 {
          flex: 1;
          font-size: 14px;
          margin: 0;
          color: #353535;
          font-weight: 500;
        }
        div {
          font-size: 24px;
          color: #b1b1b1;
        }
        p {
          width: 40px;
          height: 40px;
          margin: 0;
          background-image: url(https://m.kanman.com/static/images/sprites/sprite.user.4a48e@2x.png);
          background-size: 500%;
          background-repeat: no-repeat;
        }
        .imgs-sd {
          background-position: -3% 76%;
        }
        .imgs-sj {
          background-position: 18% 76%;
        }
        .imgs-cz {
          background-position: 41% 106%;
        }
        .imgs-fk {
          background-position: 85% 25%;
        }
        .imgs-lx {
          background-position: 63% 76%;
        }
        .imgs-jb {
          background-position: 85% 25%;
        }
        .imgs-tc {
          background-position: -3% 106%;
        }
      }
    }
  }
}
</style>